<template>
  <div class="main-box">
    <el-table
      :data="memberList"
      border
      style="width: 100%"
    >
      <el-table-column
        fixed
        prop="userId"
        label="编号"
        align="center"
        width="100"
      />
      <el-table-column prop="userName" label="姓名" align="center" width="100" />
      <el-table-column prop="userDepartment" label="部门" width="200" align="center" />
      <el-table-column label="性别" prop="userGender" align="center" width="100">
        <template slot-scope="scope">
          <span>{{ genderList[scope.row.userGender] }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="status" label="审核状态" align="center" width="200">
        <template>
          <el-tag type="success"> 用户报名已通过审核</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="arstatus" label="归档状态" align="center" width="200">
        <template slot-scope="scope">
          <el-tag size="medium" :type="tagList[scope.row.arstatus]">{{ roleList[scope.row.arstatus].name }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="归档内容" align="center">
        <template slot-scope="scope">
          <el-image :src="baseUrl + scope.row.archiveImage" style="width: 60%;height: 60%">
            <div slot="placeholder" class="image-slot">
              加载中<span class="dot">...</span>
            </div>
          </el-image>
        </template>
      </el-table-column>
      <el-table-column prop="clazzName" label="班级" width="300" align="center" />
      <el-table-column prop="userQq" label="QQ" align="center" width="100" />
      <el-table-column prop="userTelephone" label="电话" align="center" width="150" />
      <el-table-column
        fixed="right"
        align="center"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="danger"
            style="margin-left: 10%;"
            @click="handleEdit(scope.$index, scope.row)"
          >归档
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--编辑弹窗-->
    <div class="exit-box">
      <el-dialog title="归档社员信息" :visible.sync="dialogEditFormVisible">

        <el-form ref="userInfoForm" :model="rowform">
          <el-form-item label="社团号" prop="communityId">
            <el-input v-model="rowform.communityId" autocomplete="off" prop="communityId" disabled />
          </el-form-item>
          <el-form-item label="账号" prop="userId">
            <el-input v-model="rowform.userId" autocomplete="off" placeholder="学号或工号" name="userId" disabled />
          </el-form-item>
          <el-form-item label="姓名" prop="userName">
            <el-input v-model="rowform.userName" autocomplete="off" disabled />
          </el-form-item>
          <el-form-item label="归档图片" prop="archiveImage">
            <el-upload
              class="avatar-uploader"
              :action="action"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageName" :src="imageUrl" class="avatar">
              <i v-else class="el-icon-plus avatar-uploader-icon" />
            </el-upload>
          </el-form-item>

          <!--          <el-form-item>-->
          <!--            <el-button type="primary" @click="submitForm('rowform')">立即归档</el-button>-->
          <!--            <el-button @click="resetForm('rowform')">重置</el-button>-->
          <!--          </el-form-item>-->
        </el-form>
        <!--        <div slot="footer" class="dialog-footer">-->
        <!--          <el-button-->
        <!--            type="primary"-->
        <!--            @click="submitForm('rowform')"-->
        <!--          >立即归档-->
        <!--          </el-button>-->
        <!--          <el-button @click="resetForm('rowform')">重置</el-button>-->
        <!--        </div>-->
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="updateArchiveInfo">确 定</el-button>
        </div>
      </el-dialog>
    </div>
    <!--    分页-->
    <div class="pagination-box">
      <el-pagination
        :page-size="pageSize"
        :current-page="pageNum"
        :total="total"
        :page-sizes="[5, 10, 20, 50, 200, 300, 400]"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </div>
</template>

<script>
import localStorageUtil from '../../../utils/localStorageUtil'

export default {
  data() {
    return {
      memberList: [
        {
          userId: '',
          userName: '',
          userDepartment: '',
          userQq: '',
          userTelephone: '',
          userGender: '',
          clazzName: '',
          archiveImage: '',
          arstatus: '',
          communityId: localStorageUtil.read('SET_USER').userCommunityId
        }
      ],
      roleList: [
        {
          id: 0,
          name: '社员未归档'
        },
        {
          id: 1,
          name: '社员已归档'
        }
      ],
      genderList: ['男', '女'],
      tagList: ['danger', 'success'],
      /* 当前选中这一行的数据*/
      rowform: {},
      /* 编辑弹窗控制*/
      dialogEditFormVisible: false,
      /* 图片完整URL*/
      imageUrl: 'http://localhost:8888/community-management-service/static/images/',
      /* 图片上传地址*/
      action: 'http://localhost:8888/community-management-service/uploadImg/',
      /* 基础请求路径*/
      baseUrl: 'http://localhost:8888/community-management-service/',
      /* 后台返回的文件名称*/
      imageName: '',
      /* 默认每页显示条数*/
      pageSize: 5,
      /* 默认显示第一页数据*/
      pageNum: 1,
      /* 用户列表总记录条数*/
      total: 1
    }
  },
  created() {
    this.fetchMembers()
    this.fetchTotal()
  },
  // mounted() {
  //   this.load()
  // },
  methods: {
    /* 获取用户总记录条数*/
    fetchTotal() {
      const params = {
        status: 1,
        communityId: localStorageUtil.read('SET_USER').userCommunityId
      }
      this.$store.dispatch('user/getMemberTotal', params).then((res) => {
        this.total = res.data
      })
    },
    /* 每页显示多少条改变时间*/
    handleSizeChange(val) {
      this.pageNum = 1
      this.pageSize = val
      this.fetchUsers()
    },
    /* 页码发生改变时间*/
    handleCurrentChange(val) {
      this.pageNum = val
      this.fetchUsers()
    },
    // load() {
    //   // 后端请求地址
    //   fetch('http://localhost:8888/user/page?pageNum=' + this.pageNum +
    //     '&pageSize=' + this.pageSize +
    //     // 想搜索多少个字段就写多少个
    //     '&usercode=' + this.usercode +
    //     '&pageSize=' + this.communityId +
    //   '&pageSize=' + this.status).then(res => res.json()).then(res => {
    //     this.tableData = res.data
    //     this.total = res.total
    //     this.usercode = ''
    //   })
    // },
    // /* 每页显示多少条改变时间*/
    // handleSizeChange(pageSize) {
    //   this.pageSize = pageSize
    //   this.load()
    // },
    // /* 页码发生改变时间*/
    // handleCurrentChange(pageNum) {
    //   this.pageNum = pageNum
    //   this.load()
    // },
    /*
            * 归档社员信息
            * */
    updateArchiveInfo() {
      this.$store.dispatch('community/updateArchiveInfo', this.rowform).then((res) => {
        console.log(this.rowform.communityId)
        if (res.code === 200) {
          this.$message({
            message: '修改成功',
            type: 'success'
          })
        }
        this.dialogEditFormVisible = false
        this.dialogPermissionsVisible = false
        this.fetchMembers()
      })
    },
    // resetForm(formName) {
    //   this.$refs[formName].resetFields()
    // },
    fetchMembers() {
      const params = {
        status: 1,
        communityId: localStorageUtil.read('SET_USER').userCommunityId,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        order: 'desc'
      }
      // this.$store.dispatch('user/findByCommunityId', params).then((res) => {
      //   this.memberList = res.data
      //   console.log(this.memberList)
      // })
      this.$store.dispatch('user/members', params).then((res) => {
        this.memberList = res.data
        console.log(this.memberList)
      })
    },
    /* 编辑触发弹窗*/
    handleEdit(index, row) {
      this.rowform = row
      this.rowform.communityId = localStorageUtil.read('SET_USER').userCommunityId
      // this.row.status = 1
      // this.row.arstatus = 1
      // this.row.archiveImage = 'static/images/' + this.imageName
      this.dialogEditFormVisible = true
    },
    handleAvatarSuccess(res, file) {
      this.imageName = file.raw.name
      this.imageUrl = this.baseUrl + 'static/images/' + this.imageName
      /* 更新图片信息*/
      this.rowform.archiveImage = 'static/images/' + this.imageName
      console.log(this.rowform.archiveImage)
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === 'image/jpeg'
      const isLt2M = file.size / 1024 / 1024 < 2

      if (!isJPG) {
        this.$message.error('上传头像图片只能是 JPG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    }

  // handleApproval(index, row) {
  //   const params = {
  //     communityId: localStorageUtil.read('SET_USER').userCommunityId,
  //     userId: row.userId
  //   }
  //   this.$confirm(`确认将该用户：${row.userId}:${row.userName} 的申请归档吗？`)
  //     .then(_ => {
  //       this.$store.dispatch('user/memberApprovalById', params).then((res) => {
  //         if (res.code === 200) {
  //           this.$message({
  //             showClose: true,
  //             message: '已成功加入',
  //             type: 'success'
  //           })
  //         }
  //         this.fetchMembers()
  //       })
  //     })
  //     .catch(_ => {
  //       this.$message({
  //         showClose: true,
  //         message: '已经取消'
  //       })
  //     })
  // }
  }
}
</script>

<style>
  .main-box {
    margin: 2% 2%;
  }
  .disabled .el-upload--picture-card {
    display: none;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
  .pagination-box {
    margin: 4% 30%;
  }
</style>
